<!-- 作品管理-选择赛事 -->
<template>
    <div class="container">
        <!-- 搜索跟创建赛事 -->
        <div class="content-top">
                <el-input class="search-input" v-model="searchVal" :placeholder="toggleSearch ? '请输入ID' : '请输入赛事名称'"></el-input>
          <!-- <el-tooltip :content="toggleSearch ? '切换为名称' : '切换为ID'" placement="bottom">
            <el-switch
              v-model="toggleSearch"
              style="--el-switch-on-color: #13ce66; --el-switch-off-color: rgb(19, 122, 206)"
            />
          </el-tooltip> -->
          <el-button v-if="toggleSearch" icon="Search" @click="searchById" round>搜索</el-button>
          <el-button v-else icon="Search" @click="searchByName" round>搜索</el-button>
          <el-button @click="loadContestList" round>清除搜索</el-button>
              <div style="font-family: 微软雅黑;line-height:25px;margin-left: 600px;height:30px;font-size: 24px;border: 2px solid rgb(64, 158, 255);border-radius:5px;padding: 0px 20px; color: white;background-color: rgb(64, 158, 255);">作品管理</div>
        </div>

        <!-- 内容表格,border:表格边框 -->
        <!--  -->
        <el-table :data="contestList" border max-height="calc(100vh - 190px)">
            <el-table-column label="序号" type="index" align="center" width="85"/>
            <el-table-column label="赛事名称" prop="name" align="center" />
            <el-table-column label="发布者" prop="nickName" align="center" />
            <el-table-column label="赛事状态" prop="status" align="center" width="100">
                <template v-slot="scope">
                    {{ getStatusLabel(scope.row.status) }}
                </template>
            </el-table-column>
            <el-table-column label="赛事类型" prop="contestType" align="center" width="100">
                <template v-slot="scope">
                    {{ getContestTypesLabel(scope.row.contestType) }}
                </template>
            </el-table-column>
            <el-table-column label="二级学院" prop="academy" align="center" />
            <el-table-column label="操作" align="center">
                <template v-slot="scope">
                    <el-button @click="GoToWorkList(scope.row.contestId)" type="text"><el-icon><MessageBox /></el-icon>作品列表</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div style="padding-left: calc(100% - 650px); text-align: right;margin-top: 10px">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="pageSetting.page_num" :page-sizes="[5, 10, 15, 20]" :page-size="pageSetting.page_size"
                layout="total, sizes, prev, pager, next, jumper" :total="pageSetting.total">
            </el-pagination>
        </div>
    </div>
</template>

<script setup>
import {
    GetContestList,
    GetContestListById,
    GetContestListByName
} from "@/api/back/contest";
import { useRouter } from 'vue-router';
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';

const toggleSearch = ref(false);
// 分页
const pageSetting = ref({
    page_num: 1,
    page_size: 10,
    total:0
});
// 分页
function handleSizeChange(size) {
    console.log(size, 'size');
    pageSetting.value.page_size = size;
    console.log(pageSetting.value.page_size);
    contestList.value = [];
    loadContestList()
}
// 分页
function handleCurrentChange(page) {
    console.log(page, 'page');
    pageSetting.value.page_num = page;
    console.log(pageSetting.value.page_num);
    contestList.value = [];
    loadContestList()
}

// 存放数据列表
const contestList = ref([]);
// 获取数据列表
async function loadContestList() {
    try {
        const response = await GetContestList(pageSetting.value);
        if (response.data) {
            contestList.value = [];
            contestList.value.push(...response.data.pageList);
            pageSetting.value.page_num = response.data.pageNum;
            pageSetting.value.page_size = response.data.pageSize;
            pageSetting.value.total = response.data.total;
            console.log("获取数据列表成功", contestList.value);
        }
    } catch (error) {
        console.error("获取数据列表失败", error);
    }
}

// 存放搜索的值
const searchVal = ref("");
// 搜索功能
async function searchById() {
    try {
        if (searchVal.value == null || searchVal.value == "") {
            GetContestList(pageSetting.value);
        } else {
            const v = {
                search: searchVal.value,
                page: pageSetting.value
            };
            contestList.value = [];
            const response = await GetContestListById(v);
            contestList.value.push(...response.data);
            console.log("搜索成功", response);
        }
    } catch (error) {
        console.log("搜索错误", error);
    }
}
const searchByName = async () => {
    if (searchVal.value == null || searchVal.value == "") {
        ElMessage({
            message: "请输入搜索内容",
            type: "warning"
        });
        return;
    }
    contestList.value = [];
    const res = await GetContestListByName({ search: searchVal.value});
    if(res.data.length == 0){
        ElMessage({
          message: "未找到相关赛事",
          type: "error",
        });
      }else{
        contestList.value.push(...res.data);
      }
    
};

// 跳转到作品列表
const router = useRouter();
const GoToWorkList = (contestId) => {
    // contestId的值传到workList页面中
    console.log("contestId:", contestId);
    router.push({
        name: 'workList',
        query: {
            contestId: contestId,
        },
    });
};

const getStatusLabel = (status) => {
    switch (status) {
        case 0:
            return "未开始";
        case 1:
            return "进行中";
        case 2:
            return "已结束";
    }
}

const getContestTypesLabel = (contestType) => {
    switch (contestType) {
        case 0:
            return "工科";
        case 1:
            return "理科";
        case 2:
            return "文体";
        case 3:
            return "商科";
        default:
            return "综合";
    }
}


onMounted(() => {
    loadContestList();
});

</script>